﻿<html>
<head>
<title>JSFlow Demo page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="../html/html.js"></script>
<script type="text/javascript" src="jsflow.js"></script>
<script type="text/javascript">

function $(id){return document.getElementById(id);}

function log(msg){$("out").innerHTML+=msg+"<br>";}

function f1(){log("f1 called");}
function f2(){log("f2 called");}
function f3(){log("f3 called");}

var TestService = {
	GetSum: function(x, y, onload){
		var res = x+y;
		setTimeout(function(){
			onload(res);
		}, 200);
	}
};

function init(){with(JSFlow){

	// Элементами потока может быть просто функция, либо sequence, либо parallel
	// Продолжение (Continuation) должна создаваться в главной функции элемента потока

	sequence(
		function(){
			var go = new Continuation();
			f1();
			setTimeout(function(){
				go();
			}, 1000);
		},
		function(){
			f2();
			setTimeout(new Continuation(), 500);
		},
		function(){
			log("TestService GetSum requested...");
			var cont = new Continuation(); // создаем продолжение в главной функции элемента потока
			TestService.GetSum(3, 2, function(res){
				log("TestService GetSum result: "+res);
				cont(); // Здесь создавать продолжение нельзя. Следует приготовить его заранее.
			});
		},
		function(){f3(); setTimeout(new Continuation(), 300);},
		
		sequence(
			function(){
				var cont = new Continuation();
				log("Inner sequence begin");
				setTimeout(cont, 500);
			},
			function(){
				log("TestService GetSum requested...");
				var cont = new Continuation();
				TestService.GetSum(3, 8, function(res){
					log("TestService GetSum result: "+res);
					cont();
				});
			},
			function(){log("Inner sequence calculation end"); (new Continuation())();},
			function(){log("Inner sequence end"); (new Continuation())();}			
		),
		
		function(){
			log("-----------------------------------------");
			var delay = 300;
			log("before parallel: " + delay);
			setTimeout(new Continuation(), delay);
		},
		
		parallel(
			function(){
				var nr = 1;
				log("run "+nr);
				var go = new Continuation();
				setTimeout(function(){
					log("end "+nr);
					go();
				}, 100);
			},
			function(){
				var nr = 2;
				log("run "+nr);
				var go = new Continuation();
				setTimeout(function(){
					log("end "+nr);
					go();
				}, 2000);
			},
			function(){
				var nr = 3;
				log("run "+nr);
				var go = new Continuation();
				setTimeout(function(){
					log("end "+nr);
					go();
				}, 300);
			}
		),
		
		function(){
			log("after parallel");
			log("-----------------------------------------");
			setTimeout(new Continuation(), 300);
		},
		
		function(){
			log("END OF MAIN SEQUENCE REACHED");
			checkExpectations();
		}
	).run();
	
}}	

function checkExpectations(){
	var ok = $("out").innerHTML.replace(/\s+/ig, "").toLowerCase()==$("expectations").innerHTML.replace(/\s+/ig, "").toLowerCase();
	$("result").innerHTML = ok?Html.span({style:"font-weight:bold; color:#008800;"}, "OK")
		:Html.span({style:"font-weight:bold; color:#ff0000;"}, "Failure");
}
</script>
</head>
<body onload="init()">
	<h1>JSFlow Demo page</h1>
	<table border=1 cellpaddin=3 cellspacing=0>
		<tr><th>Process</th><th>Expectations</th></tr>
		<tr>
			<td valign="top"><div id="out"></div></td>
			<td valign="top">
			<div id="expectations">
				f1 called<br/>
				f2 called<br/>
				TestService GetSum requested...<br/>
				TestService GetSum result: 5<br/>
				f3 called<br/>
				Inner sequence begin<br/>
				TestService GetSum requested...<br/>
				TestService GetSum result: 11<br/>
				Inner sequence calculation end<br/>
				Inner sequence end<br/>
				-----------------------------------------<br/>
				before parallel: 300<br/>
				run 1<br/>
				run 2<br/>
				run 3<br/>
				end 1<br/>
				end 3<br/>
				end 2<br/>
				after parallel<br/>
				-----------------------------------------<br/>
				END OF MAIN SEQUENCE REACHED<br/>
			</div>
			</td>
		</tr>
	</table>
	<div id="result"></div>
</body>
</html>